<template>
  <div class="content role-manage">
    <dc-header :page-to="'/membersShip'"
               :title="'角色管理'"
               :action-title="'添加角色'"
               :right-icon="'icon-hearder-add'"
               @submit="addRole">
    </dc-header>
    <div class="head-top">
      <div class="textabovefrom">可对角色进行添加、删除、调序，管理员角色不可编辑或删除</div>
      <dc-cell v-for="item in roleList" :key="item.roleCode" :title="item.roleName"
               v-if="item.roleName=='管理员'"></dc-cell>

      <draggable v-model="roleList" :options="{group:'roleName'}" :move="getData" @end="drop">
        <dc-cell v-for="item in roleList" :key="item.roleCode" v-if="item.roleName!=='管理员'" :title="item.roleName"
                 leftIcon="icon-btn-item-delete" :leftStyle="{color:'#f15b59'}"
                 rightIcon="icon-btn-item-list" @changeClick="_delete(item)"></dc-cell>
      </draggable>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '../../common/api/member';
  import draggable from 'vuedraggable';
  import mintUi from '../../common/mintUi';
  import cell from '@/common/plugins/cell';
  import store from '../../vuex/store';
  export default {
    data () {
      return {
        roleList: [],
        dragOrder: {},
        merchantCode: store.state.shopAlter.store.storeCode || store.state.shopAlter.store.groupCode
      };
    },
    created () {
      this.getRoleLi(this.merchantCode);
    },
    components: {
      'dc-header': header,
      'dc-cell': cell,
      draggable
    },
    methods: {
      getRoleLi (data) {
        api.getRoleList(data)
          .then(res => {
            this.roleList = res;
          });
      },
      addRole () {
        mintUi.openPrompt('添加角色', {inputType: 'text', inputPlaceholder: '最多输入15个汉字'}).then(res => {
          let data = {
            roleName: res,
            merchantCode: this.merchantCode
          };
          api.addRoles(data).then(res => {
            mintUi.openToast('添加成功!');
            this.getRoleLi(this.merchantCode);
          });
        });
      },
      _delete (item) {
        let data = {
          id: item.id,
          merchantCode: this.merchantCode
        };
        mintUi.openConfirm('删除角色的同时会将角色下成员一并删除，确认删除角色？', '删除角色').then(res => {
          api.deleteRole(data)
            .then(res => {
              mintUi.openToast('删除成功!');
              this.getRoleLi(this.merchantCode);
            });
        });
      },
      getData (evt) {
        this.dragOrder.origRoleId = evt.draggedContext.element.id;
        this.dragOrder.targetRoleId = evt.relatedContext.element.id;
      },
      drop (evt) {
        this.dragOrder.origRoleSort = evt.newIndex + 1;
        this.dragOrder.targetRoleSort = evt.oldIndex + 1;
        if (this.dragOrder.origRoleId) {
          api.dragRole(this.dragOrder)
            .then(res => {
              this.getRoleLi(this.merchantCode);
            });
        }
      }
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .role-manage {
    /*.mint-cell{*/
    /*height: px2rem(100px);*/
    /*.mint-cell-wrapper{*/
    /*line-height: px2rem(100px);*/
    /*}*/
    /*}*/
    .icon-size {
      font-size: px2rem(48px);
      vertical-align: sub;
    }
    .ml15 {
      margin-left: px2rem(15px);
    }
  }
</style>
